<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>蜜读</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style>
			.search-container {
				padding: 1rem 2rem;
				background: #fff;
				box-shadow: 0px 5px 20px 0px #efefef;
				margin-bottom: 5px;
				position: relative;
			}
			.search-container .close{
				position: absolute;
				top:50%;
				right:3.2rem;
				height:20px;
				width:20px;
				background: url(icon/close.png) no-repeat center center;
				background-size: 100% 100%;
				opacity: 0.2;
				transform:translateY(-50%) ;
				-webkit-transform:translateY(-50%) ;
				display: none;
			}
			.search-container .search-input {
				border: 1px solid #ccc;
				background: #efefef;
				border-radius: 0.5rem;
				height: 3rem;
				line-height: 2rem;
				padding: 0.5rem 1.5rem 0.5rem 3.2rem ;
				font-size: 14px;
				letter-spacing: 2px;
			}
			.search-container .search-icon{
				background: url(img/ic_search.png) no-repeat center center;
				background-size: 100% 100%;
				width:1.8rem;
				height:1.8rem;
				top:2.5rem;
				margin-top:-0.9rem;
				position: absolute;
				left:2.9rem;
			}
			.search-tag-container {
				background: #fff;
				padding: 1rem 2rem;
			}
			
			.search-tag-container h6 {
				font-size: 13px;
				color: #666;
				padding-bottom: .5rem;
			}
			
			.search-tag-container ul {
				overflow: hidden;
			}
			
			.search-tag-container ul li {
				float: left;
				background: #f3f3f3;
				border-radius: 1.5rem;
				line-height: 2rem;
				height: 3rem;
				color: #666;
				padding: .5rem 1.5rem;
				font-size: 14px;
				margin: 0 1rem 1rem 0;
				position: relative;
			}
			
		</style>
	</head>

	<body>
		<div id="main" class="flex-con" style="padding-bottom: 4.17rem;overflow: hidden;">
			<div class="search-container">
				<span class="search-icon"></span>
				<!--<form target="frameFile" id="searchForm">--> 
				   <input type="search" class="search-input" placeholder="请输入书名或作者" />
				   <iframe name='frameFile' style="display: none;"></iframe>
				<!--</form>-->
						
				<span class="close"></span>
			</div>
			<div class="search-tag-container">
				<h6>大家都在搜</h6>
				<ul id="hotSearch">
					<!--<li>
						从行动开始
					</li>-->
				</ul>
			</div>
			<div id="searchListContainer">

			</div>
		</div>

		<script type="text/html" id="hotList">
			{{each data}}
			<li>
				{{$value.bookname}}
			</li>
			{{/each}}
		</script>
		<!--榜单-->
		<script type="text/html" id="searchList">
			{{each data}}
			<div class="col-xs-12 bookdetail" data-bookid={{$value.bookid}} data-videoauthorid={{$value.videoauthorid}} data-copywriter={{$value.copywriter}} data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}} style="min-height:12rem;height:auto;width:100%;padding:1rem 1.5rem 2rem 1.5rem;">
				<div class="col-xs-4" style="height:12rem;width: 29.3333%;padding:0rem;">
					<!--<img src="icon/top{{$index | topcolor}}.png" alt="" style="width: 3.17rem;height: 2.33rem;position: absolute;left: 0.6rem;top: -0.7rem;" />-->
					<!--<p style="width: 3.17rem;height: 2.33rem;position: absolute;left: 0.6rem;top: -0.7rem;color: white;text-align: center;font-size: 8px;line-height: 1.83rem;">TOP{{$index+1}}</p>-->
					<a href="javascript:;" style="display:block;height: 100%;">
						<img src="{{$value.bookimg | addUrl}}" style="width:9.17rem;height:100%;box-shadow: 3px 3px 3px #e6e6e6;border: 0;vertical-align: middle;">
					    <em style="position: absolute;display: block;width: 1.5rem;height: 1.5rem;bottom: 0.5rem;right: 1.5rem;background: url(icon/listen.png) center center no-repeat;background-size: 100%;"></em>
					</a>
				</div>
				<div class="col-xs-8" style="position: relative;height:12rem;width:68.666666%;top:0rem;left:1rem;padding: 0.2rem 0.6rem 0.5rem 0rem;left:1rem;">
					<div class="col-xs-12" style="padding: 0;margin: 0;">
						<p style="font-family: bolder;font-size: 1.6rem;color: #282828;margin-bottom: 0;">{{$value.bookname}}</p>
						<p class="aui-ellipsis-2" style="position: relative;top:0.3rem;font-size:1.4rem;color: #666;margin-top: 0.33rem;height: 4.2rem;margin-bottom: 0;">{{$value.bookrecommend}}</p>
					</div>
					{{if progessArr[$index] == 0}}
					<div class="col-xs-7" style="padding: 0;margin: 0;position: absolute;left:0;bottom:5px;">
						<p style="font-size: 1.3rem;color: #999999;margin: 0;">{{$value.videoduration}}</p>
					</div>
					{{else}}
					<div class="col-xs-7" style="padding: 0;margin: 0;position: absolute;left:0;bottom:5px;">
						<p style="font-size: 1.3rem;color: #999999;margin: 0;">{{$value.videoduration + " " + progessArr[$index]}}</p>
					</div>
					{{/if}}
					{{if userVip.type==1 || $value.isorder == 1}}
					<div class="buy" data-isactivity={{$value.book_activity}} data-isorder={{$value.isorder}} data-bookid={{$value.bookid}} style="position: absolute;bottom: 0;right: 5%;width: 7.8rem;height:2.5rem;background-image: linear-gradient(-179deg, #F7BA64 0%, #fbd454 100%);box-shadow: 0 2px 5px 0 #F8CAA7;border-radius: 100px;text-align: center;color: #333333;font-weight: bold; line-height: 2.5rem;">
						开始听书	
					</div>
					{{else}}
					<div style="position: absolute;right: 0.5rem;bottom: 0.8rem;width: 7.8rem;height:1.5rem;font-size: 1.4rem; font-weight: bold; text-align: center;color: #ED8434;">
						{{"¥ " + $value.bookprice}}
					</div>
					{{/if}}
				</div>
			</div>
			{{/each}}
		</script>
	</body>
</html>
<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/purl.js"></script>
<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/out7.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var page =1
	var searchResult='';
	var getSearchList = function() {
		var word = $('.search-input').val();
		if(word) {
			$('.search-tag-container').hide();
			$("#searchListContainer").show();
			$('.search-container .close').show()
		} else {
			$('.search-tag-container').show();
			$("#searchListContainer").hide();
			$('.search-container .close').hide();
			return;
		}
        var sign = hex_md5(objKeySort({token:token,timestamp:date}))
        $.ajax({
			type: "get",
            url: hostUrl + "product/book/search",
			data:{
                token:token,
				timestamp:date,
				word:word,
				page:page,
				rows:100,
				sign:sign
			},
			async: true,
			success: function(data) {
				if(word) {
					data.userVip=userVip
					
					if (window.localStorage) {
					var progess;
					var bookid;
					var bookCount;
					var progessStr;
					var progessArr = new Array();
					for (var i = 0; i < data.data.length; i ++) {
						bookid = data.data[i]["bookid"];
						bookCount = localStorage.getItem(bookid + "_count");
						bookCount = parseInt(bookCount);
						progess = 0;
						if (bookCount) {
							for (var j = 0; j < bookCount; j ++) {
								var value = localStorage.getItem(bookid + "_" + j);
								if (value) {
									var timeArr = value.split("_");
									if (timeArr.length == 2) {
										currentTime = parseInt(timeArr[0]);
			                            duration = parseInt(timeArr[1]);
			                            progess += parseInt((currentTime * 100) / duration);
									}
								}
								if (j == bookCount - 1) {
									if (progess == 0 || !progess) {
			                        	   progessStr = "0";
			                        	}else {
			                        		if (parseInt(progess / bookCount) >= 100) {
			                        			progessStr = "已听完";
			                        		}else {
			                        			progessStr = "已听" + parseInt(progess / bookCount) + "%";
			                        		}
			                        	}
			                    }
							}
						} else{
							progessStr = "0";
						}
						progessArr.push(progessStr);
					}
				}
				data.progessArr = progessArr;
					
					var search_html = template("searchList", data);
					document.getElementById('searchListContainer').innerHTML = search_html;
				}
			}
		});
	}
	getToken(getSearchList)
	var getHostSearch=function(){
		$.ajax({
			type: "get",
			url: hostUrl + "product/book/hotsearch",
			async: true,
			success: function(data) {
				if(!searchResult){
					searchResult=data;
					var hot_html = template("hotList", searchResult);
					document.getElementById('hotSearch').innerHTML = hot_html;
				}
			}
		});
	}
	getHostSearch()
	$('.search-input').on('keyup', function(e) {
		if(e.keyCode == '13') {
			$('.search-input').blur();
			getSearchList();
		}
		
	})
	
	$("#main").on('click', '.buy', function(e) {
		e.stopPropagation()
		var parent = $(this).parents('.bookdetail')
		location.href = "chapter.html?bookid=" + parent.attr('data-bookid') + "&bookname="+parent.attr('data-bookname')+"&bookimg=" + parent.attr('data-bookimg');
		
	})
	$('body').on('click','#hotSearch li',function(){
		$('.search-input').val($(this).text().trim());
		getSearchList();
	})
	
	$('.search-container .close').click(function(){
		$('.search-input').val('');
		$('.search-input').focus()
		getSearchList();
	})
	$("#main").on('click','.bookdetail',function(){
			window.location.href = "bookDetail.html?bookid="+$(this).attr('data-bookid');
		})
</script>